// 整合函数-判断是否登录
checkToken()

// 整合函数-渲染用户名
renderUsername()

// 整合函数-退出登录
registerLogout()

// 抽取函数-获取学员数据
async function getData() {
    // 获取数据
    const res = await axios.get('/students')
    console.log(res)

    // 渲染数据
    const html = res.data.map(e => {
        // 解构数据
        const {name, age, gender, group, hope_salary, salary, province, city, area, id} = e
        return `
            <tr>
                <td>${name}</td>
                <td>${age}</td>
                <td>${gender === 0 ? '男' : '女'}</td>
                <td>第${group}组</td>
                <td>${hope_salary}</td>
                <td>${salary}</td>
                <td>${province + city + area}</td>
                <td data-id="${id}">
                <a href="javascript:;" class="text-success mr-3"><i class="bi bi-pen"></i></a>
                <a href="javascript:;" class="text-danger"><i class="bi bi-trash"></i></a>
                </td>
            </tr>
        `
    }).join('')

    document.querySelector('.list').innerHTML = html

    // 学员人数
    document.querySelector('.total').innerText = res.data.length
}
getData()

// 显示新增弹窗
// 实例化
const modalDom = document.querySelector('#modal')
const modal = new bootstrap.Modal(modalDom)

// 绑定点击事件
document.querySelector('#openModal').addEventListener('click', () => {
    // 因为点击编辑后，弹窗内容依然在，需要清空再显示
    // 修改标题
    document.querySelector('.modal-title').innerText = '添加学员'

    // 清空form表单的value值,reset无法清空下拉选项值
    document.querySelector('#form').reset()

    // 清空市和地区
    citySelect.innerHTML = `<option value="">--城市--</option>`
    areaSelect.innerHTML = `<option value="">--地区--</option>`

    // 清空编辑时在modalDom上添加的id
    modalDom.dataset.id = ''
    
    modal.show()
})


// 省市区联动
const proSelect = document.querySelector('[name="province"]')
const citySelect = document.querySelector('[name="city"]')
const areaSelect = document.querySelector('[name="area"]')

async function initSelect() {
    // 获取省份数据
    const proRes = await axios.get('/api/province')
    // 渲染省份数据
    const proHtml = proRes.list.map(v => {
        return `<option value="${v}">${v}</option>`
    }).join('')
    proSelect.innerHTML = `<option value="">--省份--</option>${proHtml}`

    // 获取市数据+渲染
    proSelect.addEventListener('change', async () => {
        // 省份的值改变时获取市数据
        const cityRes = await axios.get('/api/city', {
            params: {
                pname: proSelect.value
            }
        })

        // 渲染市数据
        const cityHtml = cityRes.list.map(v => {
            return `<option value="${v}">${v}</option>`
        }).join('')

        citySelect.innerHTML = `<option value="">--城市--</option>${cityHtml}`

        // TODO:清空区数据
        areaSelect.innerHTML = `<option value="">--地区--</option>`
    })

    // 获取区数据+渲染
    citySelect.addEventListener('change', async () => {
        // 市数据改变时，获取区数据
        const areaRes = await axios.get('/api/area', {
            params: {
                pname: proSelect.value,
                cname: citySelect.value
            }
        })

        // 渲染区数据
        const areaHtml = areaRes.list.map(v => {
            return `<option value="${v}">${v}</option>`
        }).join('')

        areaSelect.innerHTML = `<option value="">--地区--</option>${areaHtml}`
    })

}
initSelect()

// 新增学员
// 给新增弹窗的确认按钮绑定点击事件
document.querySelector('#submit').addEventListener('click', () => {
    if (modalDom.dataset.id){
        // 存在则调用保存修改函数
        saveEidt()
    }else {
        // 不存在则是新增，调用新增函数
        addStudent()
    }
})

// 封装新增学员函数
async function addStudent() {
    // 获取输入的数据
    const form = document.querySelector('#form')
    const data = serialize(form, {hash: true, empty: true})
    
    // 转换数据格式
    data.age = +data.age
    data.gender = +data.gender
    data.hope_salary = +data.hope_salary
    data.salary = +data.salary
    data.group = +data.group
    // console.log(data)

    // 调用接口
    try {
        // 新增成功
        const res = await axios.post('/students', data)
        // 显示成功信息
        showToast(res.message)
        // 重新渲染学员列表
        getData()
    } catch (error) {
        // 新增失败
        console.dir(error)
        showToast(error.response.data.message)
    }
    // 不论新增成功或失败都关闭新增学员弹窗
    modal.hide()
}

// 删除学员
document.querySelector('.list').addEventListener('click', (e) => {
    // 点击了删除标签-调用对应的函数
    if (e.target.classList.contains('bi-trash')) {
        const id = e.target.parentNode.parentNode.dataset.id
        delStudent(id)
    }
    // 点击了编辑标签-调用对应的函数
    if (e.target.classList.contains('bi-pen')) {
        const id = e.target.parentNode.parentNode.dataset.id
        eidtStudent(id)
    }
})

// 抽取函数-删除数据
async function delStudent(id) {
    // console.log(id)
    try {
        const res = await axios.delete(`/students/${id}`)
        // console.log(res)
        // 成功提示用户删除成功
        if (!res) {
            showToast('删除成功！')
        }
        // 重新渲染学员列表
        getData()
    } catch (error) {
        
    }
}

// 抽取函数-编辑数据
async function eidtStudent(id) {
    const res = await axios.get(`/students/${id}`)

    // 修改弹框的标题
    document.querySelector('.modal-title').innerText = '修改学员'

    // 设置输入框数据（姓名、年龄、组号、期望薪资、就业薪资）
    // 自定义属性数组，便于动态获取对应的dom元素设置值
    const keyArr = ['name', 'age', 'group', 'hope_salary', 'salary']
    keyArr.forEach(key => {
        document.querySelector(`[name=${key}]`).value = res.data[key]
    })

    // 设置性别(0 男， 1 女)
    const {gender} = res.data
    // 伪数组[男checkbox, 女checkbox]
    const chks = document.querySelectorAll('[name="gender"]')
    chks[gender].checked = true

    // 设置籍贯
    // 根据点击编辑按钮所在人员服务器返回的数据解构省市区
    const {province, city, area} = res.data

    // 设置省份(select标签与option标签，设置select标签的value值与option标签value值一致，select标签会自动选中该option标签显示，设置select标签的value属性，对应的option会被选中)
    proSelect.value = province

    // 设置市
    const cityRes = await axios.get('/api/city', {
        params: {
            pname: proSelect.value
        }
    })

    // 渲染市数据
    const cityHtml = cityRes.list.map(v => {
        return `<option value="${v}">${v}</option>`
    }).join('')

    citySelect.innerHTML = `<option value="">--城市--</option>${cityHtml}`
    citySelect.value = city

    // 设置区
    const areaRes = await axios.get('/api/area', {
        params: {
            pname: proSelect.value,
            cname: citySelect.value
        }
    })

    // 渲染区数据
    const areaHtml = areaRes.list.map(v => {
        return `<option value="${v}">${v}</option>`
    }).join('')

    areaSelect.innerHTML = `<option value="">--地区--</option>${areaHtml}`
    areaSelect.value = area

    // 显示弹窗
    modal.show()

    // 保存学员的id到弹窗标签，用来区分 新增（dataset.id不存在） 编辑（dataset.id有值）
    modalDom.dataset.id = id
}


// 抽取函数-保存修改
async function saveEidt() {
    // console.log('点击了编辑')
    const form = document.querySelector('#form')
    const data = serialize(form, {hash: true, empty: true})

    // 获取的数据进行格式转换
    data.age = +data.age
    data.gender = +data.gender
    data.hope_salary = +data.hope_salary
    data.salary = +data.salary
    data.group = +data.group

    // 获取的数据调用修改接口发送至服务器
    try {
        const res = await axios.put(`/students/${modalDom.dataset.id}`, data)
        // 提示用户修改成功
        showToast(res.message)
        // 重新渲染学生列表
        getData()
    } catch (error) {
        // console.dir(error)
        showToast(error.response.data.message)
    }
    // 不论成功还是失败都关闭弹窗
    modal.hide()
}